{extend name="../../common/view/main"/}
{block name="style"}
<link href="__STATIC__/articles/pc/css/main.min.css" rel="stylesheet">
<style>
    body {
        background-color: #fff;
    }
</style>
{/block}

{block name="body"}
<div id="main-container" class="article-section articles-detail-section">
    <div class="row">
        <div class="col-md-9">
            <div class="">
                <div class="articles-title">
                    <div class="title">
                        <h2>{$data.title}</h2>
                    </div>
                    <div class="info">
                        <span class="category">
                            <a href="{:url('/articles/lists',['category_id'=> $data.category.id])}">{$data.category.title}</a>
                        </span>
                        <span class="create-time">发表于 {$data.create_time_str}</span>
                    </div>
                    
                    <div class="description clearfix" style="color: #999;font-size: 14px;">{$data.description}</div>
                    
                    {notempty name="$data.keywords"}
                    <div class="keywords-box">
                        <span>关键字</span>
                        {volist name="$data.keywords" id="vo" key="k"}
                            <span class="keywords">{$vo}</span> 
                        {/volist}
                    </div>
                    {/notempty}
                </div>

                <hr/>
                <section id="contents">
                    <div class="news-content">
                        <article class="content">
                            {:htmlspecialchars_decode($data.content)}
                        </article>

                        {notempty name="$data['source']"}
                        <div style="margin-bottom: 20px;color: #C0C0C0;">
                            <i class="icon-chrome"></i> 来源：{$data.source}
                        </div>
                        {/notempty}
                    </div>

                    <div class="article-copyright">
                        非特殊说明，本文版权归原作者所有，转载请注明出处 
                    </div>
                </section>
                
                <div class="nav-link">
                    <div class="item">
                        {if $prev_detail}
                        <span class="meta-nav">上一篇：</span>
                        <a href="{:url('articles/pc.Index/detail', ['id'=>$prev_detail.id])}" title="{$prev_detail.title}">
                            {$prev_detail.title}
                        </a>
                        {/if}
                    </div>
                    <div class="item">
                        {if $next_detail}
                        <span class="meta-nav">下一篇：</span>
                        <a href="{:url('articles/pc.Index/detail', ['id'=>$next_detail.id])}" title="{$next_detail.title}">
                            {$next_detail.title}
                        </a>
                        {/if}
                    </div>
                </div>
            </div>

            <div class="action-section">
                <!--点赞按钮容器-->
                <div class="support-section">
                    <div class="support-btn {if $data['support_yesno']==1}active{/if}" data-url="{:url('articles/api.support/action', ['info_id'=>$data.id])}" data-id="{$data['id']}">
                        <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                    </div>
                </div>
                <!--收藏按钮容器-->
                <div class="favorites-section">
                    <div class="favorites-btn {if $data['favorites_yesno']==1}active{/if}" data-url="{:url('articles/api.favorites/action', ['info_id'=>$data.id])}" data-id="{$data['id']}">
                        <i class="fa fa-star" aria-hidden="true"></i>
                    </div>
                </div>
            </div>
            
            <!--评论容器-->
            <div class="comment-section">
                <div class="section-title clearfix">
                    <div class="extend-line"></div>
                    <h3 class="title">参与评论</h3>
                </div>
                <div class="add-comment clearfix">
                    <form action="{:url('articles/api.comment/add')}" method="post" class="comment-form">
                        <input type="hidden" name="uid" value="{:get_uid()}" />
                        <input type="hidden" name="article_id" value="{$data['id']}" />
                        {if condition="is_login()"}
                        <div class="user">
                            <div class="avatar">
                                <img src="{$common_header_user.avatar64}" class="user-image" alt="User Image">
                            </div>
                            <div class="nickname text-ellipsis">
                                {$common_header_user.nickname}
                            </div>
                        </div>
                        {else}
                        <div class="user">
                            <div class="avatar">
                                <img src="__COMMON__/images/default_avatar_64_64.jpg" class="user-image">
                            </div>
                            <div class="nickname text-ellipsis">
                                游客
                            </div>
                        </div>
                        {/if}
                        <div class="form-comment">
                            <textarea class="textarea" name="content" rows="3" placeholder="发布评论"></textarea>
                            <div class="comment-submit-box">
                                <button type="submit" class="btn btn-info">发布评论</button>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="section-title clearfix">
                    <div class="extend-line"></div>
                    <h3 class="title">评论列表</h3>
                </div>
                <div class="comment-list-section" data-url="{:url('articles/api.comment/lists', ['article_id'=>$data.id])}" data-support-url="{:url('articles/api.comment/support')}">
                    <div class="list-section" data-role="list-section">
                        <div class="loading">加载中...</div>
                    </div>
                    <div class="page-section hidden">
                        <ul id="pager" class="pager" data-ride="pager" data-page="1" data-elements="prev,nav,next"></ul>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">

            <div class="right-block">
                <div class="right-block-item">
                    {include file="pc/common/_hot" /}
                </div>
            </div>

            <div class="right-block">
                <section class="">
                    <a rel="nofollow" class="btn btn-lg btn-info btn-block btn-articles" href="{:url('articles/pc.Index/lists')}" target="_blank">
                        阅读更多内容，狠戳这里
                    </a>
                </section>
            </div>
            
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script src="__STATIC__/articles/pc/js/main.min.js"></script>
<script>
    $(function(){
        // 获取分页器实例对象
        var myPager = $('.pager').data('zui.pager');
        //提交评论
        $(document).on('submit', 'form.comment-form', function (e) {
            e.preventDefault();
            let formContent = $(this).serialize();
            let action = $(this).attr('action');

            //异步提交
            $.post(action, formContent, function (res) {
                if(res.code == 200){
                    toast.success(res.msg);
                    //清空评论框
                    $('textarea[name="content"]').val('');
                    //异步加载第一页评论
                    loadCommentList(url, {}, 1, function(res){
                        // 设置当前页码，并同时设置记录总数， 每页记录数目
                        myPager.set(res.data.current_page, res.data.total, res.data.per_page);
                        if(res.data.last_page > 1){
                            $('.page-section').removeClass('hidden');
                        }
                    });
                }else{
                    toast.error(res.msg);
                    return false;
                }
            });
        });

        //加载列表
        var url = $('.comment-list-section').data('url');
        //初始加载
        loadCommentList(url, {}, 1, function(res){
            // 设置当前页码，并同时设置记录总数， 每页记录数目
            myPager.set(res.data.current_page, res.data.total, res.data.per_page);
            if(res.data.last_page > 1){
                $('.page-section').removeClass('hidden');
            }
		});

        //动态绑定分页器页码点击
        $('.pager').on('onPageChange', function(e, state, oldState) {
            //获取搜索关键字
            if (state.page !== oldState.page) {
                loadCommentList(url, {}, state.page, function(ret){});
            }
        });

        //文章点赞
        $('.support-section').on('click','.support-btn',function(){
            var id = $(this).data('id');
            var url = $(this).data('url');
            var data = {
                info_id:id,
                info_type: 'Articles'
            };
            $.post(url,data,function(ret){
                console.log(ret)
                if(ret.code == 200){
                    if($('.support-btn').hasClass('active')){
                        $('.support-btn').removeClass('active');
                    }else{
                        $('.support-btn').addClass('active');
                    }
                }else{
                    if(ret.data == 'login'){
                        $.zui.modalTrigger.show({
                            'showHeader' : false,
                            'remote' : '/ucenter/Common/quickLogin.html'
                        });
                    }else{
                        toast.error(ret.msg);
                    }
                }
            });
        });

        //文章收藏
        $('.favorites-section').on('click','.favorites-btn',function(){
            var _this = $(this);
            var id = $(this).data('id');
            var url = $(this).data('url');
            var data = {
                info_id: id,
                info_type: 'Articles'
            };
            $.post(url,data,function(ret){
                if(ret.code == 200){
                    if($('.favorites-btn').hasClass('active')){
                        $('.favorites-btn').removeClass('active');
                    }else{
                        $('.favorites-btn').addClass('active');
                    }
                }else{
                    if(ret.data == 'login'){
                        $.zui.modalTrigger.show({
                            'showHeader' : false,
                            'remote' : '/ucenter/Common/quickLogin.html'
                        });
                    }else{
                        toast.error(ret.msg);
                    }
                    return false;
                }
                
            });
        });

        //评论点赞
        $('.comment-list-section').on('click','.support',function(e){
            var _this = $(this);
            //评论ID
            var id = _this.data('id');
            //评论点赞接口
            var url = $('.comment-list-section').data('support-url');
            var data = {
                info_id: id,
                info_type: 'Comment'
            };
            $.post(url,data,function(ret){
                if(ret.code == 200){
                    var support_num = Math.round(_this.find('p').text());
                    if(support_num == '赞') support_num = 0;
                    if(_this.hasClass('active')){
                        //取消操作
                        _this.removeClass('active');
                        _this.find('.fa').removeClass('fa-heart');
                        _this.find('.fa').addClass('fa-heart-o');
                        //数字减少
                        if(Math.round(support_num) === support_num){
                            _this.find('p').text(support_num-1);
                        }
                    }else{
                        //点赞操作
                        _this.addClass('active');
                        _this.find('.fa').removeClass('fa-heart-o');
                        _this.find('.fa').addClass('fa-heart');
                        //数字增加
                        if(Math.round(support_num) === support_num){
                            _this.find('p').text(support_num+1);
                        }
                    }
                }else{
                    if(ret.data == 'login'){
                        $.zui.modalTrigger.show({
                            'showHeader' : false,
                            'remote' : '/ucenter/Common/quickLogin.html'
                        });
                    }else{
                        toast.error(ret.msg);
                    }
                }
            });
        });
    });

</script>
{/block}